<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./script/d3.v7.min.js"></script>
    <script src="./script/mock-min.js"></script>
</head>
<body>
<div class="test"></div>
<script>
    //data
    const Random = Mock.Random;
    let dataset=[250,210,170,130,90,80,100,300,65,77,235,400]
    let datasetName=[]
    for(let i=0;i<12;i++){
        datasetName.push(Random.cname())
    }

    //init table
    let scaleLinear=d3.scaleLinear().domain([0,d3.max(dataset)]).range([0,600])
    let rectWidth=50
    let width=(rectWidth)*dataset.length
    let xScale=d3.scaleBand().domain(datasetName).rangeRound([0,width])
    let yScale=d3.scaleLinear().domain([0,d3.max(dataset)]).range([600,0])
    let xAxis=d3.axisBottom(xScale).ticks(dataset.length)
    let yAxis=d3.axisLeft(yScale).ticks(10)
    let g=d3.select('.test').append('svg').append('g')
    dataset.forEach(i=>g.append('rect'))

    //rectangle
    g.attr("width",(rectWidth)*dataset.length).attr('height',scaleLinear(d3.max(dataset)))
        .selectAll('rect').data(dataset)
        .attr("fill","orange").attr('transform','translate(35,0)')
        .attr("width",rectWidth-5).attr("height",'0')
        .attr('y',scaleLinear(d3.max(dataset))).attr("x",(d,i)=>i*rectWidth)
        .transition().duration(500).delay((d,i)=>i*200)//.ease(d3.easeElasticInOut)
        .attr('height',(d)=>scaleLinear(d)).attr('y',((d)=>scaleLinear(d3.max(dataset))-scaleLinear(d)))
    d3.select('svg').attr("width",(rectWidth)*dataset.length+35).attr("height",scaleLinear(d3.max(dataset))+30)


    //axis
    g.append('g').attr('transform','translate(30,0)').call(yAxis)
    g.append('g').attr('transform','translate(30,'+scaleLinear(d3.max(dataset))+')').call(xAxis)
</script>
</body>
</html>